本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

關於網頁的組成

要講到CSS選取器的話，就必須了解一個網頁的組成，在現代的網頁設計中最基本都會擁有三大元素：HTML、CSS、JavaScript，而 CSS 就是負責其中視覺外觀的部分，通常會跟 HTML 以及 JavaScript 一起作用。

CSS選取器與其他技術的搭配

一個網頁的視覺通常會利用 CSS 來處理他的 HTML 視覺外觀，簡單的說，HTML 是將網頁資料標記出他的意義，而CSS則是將HTML標籤賦予外觀設定，分工其實非常的清楚，而搭配 JavaScript 的話，則可以讓網頁增加一些視覺互動功能，像是變更字體大小好讓畫面的閱讀更加輕鬆啦，或是做到頁籤區塊的切換。

CSS選取器的基本組成跟作用

CSS 在網頁中的運用，你可以將它視為一個「視覺外觀的設定檔」，或者可思考成一個「裝潢規劃表」，略過 inline-style 的話，在一個獨立的樣式區塊（註：<style>）或是CSS檔案中，他的語法結構大致會像下方這樣

header{
    width: 100%;
    text-align: center;
    font-size: 87px;
}

而翻譯成白話文的話就像下方這樣

你想設定的目標{
    要設定的項目1：設定的內容;
    要設定的項目2：設定的內容;
    要設定的項目3：設定的內容;
}

如果上面的概念能懂的話，我們可以再翻譯一次成下面這樣

選取目標{
    對目標設定1：設定的內容;
    對目標設定2：設定的內容;
    對目標設定3：設定的內容;
}

上述都能理解的話，我們就能切換到下面這種正規的講法了

選取器{
    屬性1：屬性的內容值;
    屬性2：屬性的內容值;
    屬性3：屬性的內容值;
}

經過三段的白話文翻譯，我想各位應該就能理解到，其實CSS選取器就是你想要設定的那個對象，至於為何會叫做選取器？基本上選取器的寫法有很多種，有時單層有時多層，但不管幾層都是為了選到你要設定的那個目標對象，所以我們使用「選取器」來稱呼會是比較好且正確的。

CSS選取器能做什麼？

CSS作為一個設定 HTML 頁面元素的強大存在來說，一個 HTML 頁面中的結構跟資料在現在越來越複雜，相對的 CSS 選取器也變得越來越多樣強大，好讓我們可以更加輕鬆的選取到我們想要設定的對象，簡單的分類的話，可以有以下幾種大項

• Tag
• class
• ID
• 屬性
• 僞元素（虛擬元素）
• 僞類別（虛擬類別）

而其中僞類別 Amos 又可以再將其細分成

• 動態僞類別（:hover、:active...等）
• 結構僞類別（:first-child、:last-child...等）
• 迴圈僞類別（:nth-child、:nth-of-type...等）
• 表單僞類別（:disabled、:enabled...等）

每一種選取器都有它特殊的用途，熟悉各式選取器的組合搭配運用，可說是一個網頁切版人員或前端工程師的基礎必備能力，像 Amos 目前就用的還不是很熟，覺得還有很多可以變化的技巧還在努力挖掘中，如果你也有跟我一樣的感覺的話，就跟著 Amos 一起在這個主題練習與成長吧！

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學